<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left" style="gap: 10px; flex-wrap: wrap;">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-error" hover-class="button-error-hover" :hover-stay-time="100"
					@click="contentArea">
					<uni-icons type="loop" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">手动同步区域</text>
				</view>
				<view class="gl-button gl-button-error" hover-class="button-error-hover" :hover-stay-time="100"
					@click="contentAlert">
					<uni-icons type="loop" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">手动同步商品</text>
				</view>
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
			</view>
		</view>

		<view class="gl-body table-container" style="background-color: #f8f8f8;font-size: x-small;"
			:style="{height:swiperH+'px'}">
			<uni-table type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>名称</uni-th>
					<uni-th>分类</uni-th>
					<uni-th>商户</uni-th>
					<uni-th>销量</uni-th>
					<uni-th>库存</uni-th>
					<uni-th>价格</uni-th>
					<!--
							<uni-th>属性</uni-th> 
							-->
					<uni-th width="40">状态</uni-th>
					<uni-th width="40">上架</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in productData" :key="index">
					<uni-td align="center" width="30">{{item.id}}</uni-td>
					<uni-td><text style="font-weight: bold;" @tap="EventButtonNew(item)">{{item.name}}</text>
					</uni-td>
					<uni-td>{{item.max_mode.name}} -> {{item.min_mode.name}}</uni-td>
					<uni-td>{{item.pid_place.nicename}}</uni-td>
					<uni-td>{{item.hot}}</uni-td>
					<uni-td>{{item.cur_num}}</uni-td>
					<uni-td>
						<view style="display: flex;gap: 5px;">
							<text
								style="color: #6a6a6a;font-size: small;">￥{{(item.price.money / 100).toFixed(2)}}</text>
							<text
								style="color: #007aff;font-size: small;">￥{{(item.price.price / 100).toFixed(2)}}</text>
						</view>
					</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.status)" style="transform:scale(0.5)" disabled="true"
							@change="event => EventStateChange(event, item.id)" />
					</uni-td><uni-td>
						<switch :checked="Boolean(item.is_list)" style="transform:scale(0.5)"
							@change="event=>EventListChange(event,item.id)" />
					</uni-td>
					<uni-td>
						<text style="color: #007aff;font-size: small;" @tap="EventButtonNew(item)">编辑</text>
					</uni-td>

				</uni-tr>
			</uni-table>
		</view>

		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>

		<!--模态窗口-->
		<popProductVue ref="popupProductBase" @refresh="refresh"></popProductVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popProductVue from '@/components/sub-product/pop-product.vue'
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页					
				search: '',

				curPlace: null, // 当前商户
				productData: [],
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		components: {
			popProductVue
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			loadDefData() {
				this.loadDataPlace()
			},
			async loadDataPlace() {
				let host = this.sConf.host + '/admin/hasPlace/';
				let token = this.sConf.auth.token || '';
				let data = {}
				await psMethod.authenticatorPostSync(host, token, data).then(res => {
					console.log('加载供应链商户', res);
					this.curPlace = res.resmsg
				})
				this.refresh()
				console.log('加载供应链商户__完成');
			},
			contentArea() {
				let that = this
				uni.showModal({
					title: '确认',
					content: '是否要同步行政区划',
					success(r) {
						if (r.confirm) {
							that.loadDataSyncArea()
						}
					}
				})
			},
			loadDataSyncArea() {
				let host = this.sConf.host + '/admin/syncArea/';
				let token = this.sConf.auth.token || '';
				let data = {}
				psMethod.authenticatorPostSync(host, token, data).then(res => {
					console.log('同步行政区划', res);
					uni.showModal({
						title: '完成',
						content: '发送请求成功，等待后台同步完成',
						showCancel: false
					})
				})
			},
			contentAlert() {
				let that = this
				uni.showModal({
					title: '确认',
					content: '是否要同步SPU列表',
					success(r) {
						if (r.confirm) {
							that.loadDataSync()
						}
					}
				})
			},
			loadDataSync() {
				let host = this.sConf.host + '/admin/hasSPU/';
				let token = this.sConf.auth.token || '';
				let data = {}
				psMethod.authenticatorPostSync(host, token, data).then(res => {
					console.log('加载SPU列表', res);
					uni.showModal({
						title: '完成',
						content: '发送请求成功，等待后台同步完成',
						showCancel: false
					})
				})
			},
			/**
			 * 新商品详情页面
			 */
			EventButtonNew(e = null) {
				// this.$emit('navPage', e)
				// uni.$emit('productInfo', e)

				if (!e) {
					let that = this
					uni.showModal({
						title: "新的商品",
						placeholderText: "请输入新的商品名称",
						editable: true,
						success(r) {
							if (r.confirm) {

								let host = that.sConf.host + '/admin/cargoBase/';
								let token = that.sConf.auth.token || '';
								let data = {
									name: r.content
								}
								psMethod.authenticatorPostSync(host, token, data).then(res => {
									console.log('创建商品', res);
									uni.showToast({
										title: '提交商品成功'
									})
									that.refresh()
								}).catch(err => {
									console.log('创建商品失败', err);
									uni.showModal({
										title: '失败',
										content: '创建商品失败',
										showCancel: false
									})
								})

							}
						}
					})
				} else {
					this.$refs.popupProductBase.open(e)
				}
			},
			/**
			 * 商品审核		
			 */
			EventStateChange(e, index) {
				console.log('EventStateChange', e.detail.value, index);
				let host = this.sConf.host + '/admin/cargoBase/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					status: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {} else {
						uni.showToast({
							title: '请求失败'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
				})
			},
			/**
			 * 商品上架			
			 */
			EventListChange(e, index) {
				console.log('EventListChange', e.detail.value);
				let host = this.sConf.host + '/admin/cargoBase/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					is_list: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {} else {
						uni.showToast({
							title: '请求失败'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
				})
			},
			refresh() {
				let host = this.sConf.host + '/admin/cargoList/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					pid: this.curPlace.id,
					ordering: '-id'
				}
				if (this.search.length > 0) {
					console.log('search', this.search);
					data.search = this.search
				}
				// if (this.filter.mode) {
				// 	data.mode = this.filter.mode
				// }
				// if (this.filter.modep) {
				// 	data.modep = this.filter.modep
				// }
				// if (this.filter.pid) {
				// 	data.pid = this.filter.pid
				// }
				// this.checkData.forEach(item => {
				// 	data[item] = 1
				// })
				// console.log('查询参数', data);
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载商品列表', res);
					if (res.rescode === 200) {
						this.productData = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404) {
						this.page--
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>